<template>
  <div class="menus">
    <div v-for="menuone in menuList" :style="menuone.style" :class="menuone.class" @click="selectMenu(menuone)">
      <img :src="menuone.img">
      <p>{{menuone.text}}</p>
    </div>
  </div>
</template>

<script>
  import Vue from "vue";
  import CryptoJS from "crypto-js";
  import Unils from "@/utils/encrypt.js";
  import myStore from '@/pages/store';

  export default {
    name: 'mainmenu',
    data() {
      return {
        menuList: [{
          img: require('../../static/imgs/dingdan.png'),
          text: '我的订单',
          style: {background: "#51a051"},
          class: ["menu", "bounceInDown", "animated"]
        },
          {
            img: require('../../static/imgs/kaihu.png'),
            text: '对公开户',
            style: {background: "#b09460"},
            class: ["menu", "bounceInLeft", "animated"]
          },
          {
            img: require('../../static/imgs/biangeng.png'),
            text: '对公信息变更',
            style: {background: "#49a688"},
            class: ["menu", "bounceInRight", "animated"]
          },
          {
            img: require('../../static/imgs/huikuan.png'),
            text: '个人外汇汇出汇款',
            style: {background: "rgb(70, 175, 184)"},
            class: ["menu", "bounceInUp", "animated"]
          },
          {
            img: require('../../static/imgs/kaihu.png'),
            text: '外汇开户',
            style: {background: "#5c5ea4"},
            class: ["menu", "bounceInLeft", "animated"]
          },
          {
            img: require('../../static/imgs/zhengming.png'),
            text: '零售资信证明',
            style: {background: "#5b008094"},
            class: ["menu", "bounceInDown", "animated"]
          },
          {
            img: require('../../static/imgs/zhuxiao.png'),
            text: '对公销户',
            style: {background: "#800035b3"},
            class: ["menu", "bounceInRight", "animated"]
          },
          {
            img: require('../../static/imgs/quxian.png'),
            text: '大额取现',
            style: {background: "rgb(188, 137, 20)"},
            class: ["menu", "bounceInUp", "animated"]
          },
          {
            img: require('../../static/imgs/quxian2.png'),
            text: '外汇取现',
            style: {background: "#89a84c"},
            class: ["menu", "bounceInRight", "animated"]
          },
          {
            img: require('../../static/imgs/fuwu.png'),
            text: '上门服务',
            style: {background: "#20728b"},
            class: ["menu", "bounceInDown", "animated"]
          },
          {
            img: require('../../static/imgs/jia.png'),
            text: '敬请期待',
            style: {background: "rgb(143, 159, 164)"},
            class: ["menu", "bounceInLeft", "animated"]
          }],
      }
    },
    mounted: function() {
     if(this.$getStore("appAccessToken")==""||this.$getStore("appAccessToken")==undefined){
      this.getDatas();//获取url拼参
    }

    },
    methods:{
      getArg(key) {
        var src = location.search;
        var pattern = new RegExp("\\b" + key + "=" + "([^&]*)");
        var matcher = src.match(pattern);
        return matcher == null ? null : decodeURIComponent(matcher[1]);
      },
      getDatas(){
        let that = this;
        let datas = JSON.parse(that.getArg("WXdatas")); //拿到url带的数据
        let msg = {
          "datasdk":datas
        };
        that.$http
        .post(myStore.BaseUrl+"/oauth2/ws/newaccesscontroll/checkAndInitSDK", JSON.stringify(msg))
        .then(function(response) {
          let resp = response.data;
          if (resp.returnCode == "000000") {
            let key = resp.key;
            let iv = "";
            let datasdk = Unils.decrypt(resp.rspData, CryptoJS.enc.Utf8.parse(key), iv);
            let datasdk1 = JSON.parse(datasdk);
            let content = JSON.parse(datasdk1.content);
            that.$setStore("appID",content.content.appID);
            that.$setStore("ChannelId",content.content.ChannelId);
            that.$setStore("MchannelId",content.content.MchannelId);
            that.$setStore("wechatOpenId",content.content.remark1);
            that.$setStore("appAccessToken",datasdk1.appAccessToken);
          }else{
            that.$indicator.close();
            that.$messagebox.alert(resp.returnMsg,"温馨提示").then(action => {

            })
          }
        })
        .catch(function(error) {
            that.$indicator.close();

        });
      },
      selectMenu(menuone){
        if(menuone.text=="对公信息变更"){
          this.$router.push({path:"/agent",query:{}})
        }else if(menuone.text=="对公开户"){
          this.$router.push({path:"/preApplication",query:{}})
        }else if(menuone.text=="外汇取现"){
          this.$router.push({path:"/foreignCurrency",query:{}})
        }else if(menuone.text=="大额取现"){
          this.$router.push({path:"/bigCurrency",query:{}})
        }
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .menus {
    width: 100%;
    margin: 0 auto;
  }

  .menu {
    width: calc(100% / 3);
    float: left;
    height: 120px;
    padding: 20px 0;
    border: 2px solid white;
    border-radius: 5px;
    > img {
      width: 40%;
    }
    > p {
      width: 100%;
      color: white;
      font-size: 13px;
    }
  }
</style>
